<template>
  <div class="rights">
    <div class="rights-header">
      <el-row>
        <el-col>
          <el-button
            type="primary"
            v-btnpermission="'btn-rightadd'"
            @click="addDialogVisible = true"
            >新增</el-button
          >
        </el-col>
      </el-row>
      <el-card class="drug-head-contatiner-title2">
        <el-form :inline="true" :model="formSearch" class="demo-form-inline">
          <el-form-item label="权限名称" prop="authName">
            <el-input v-model="formSearch.authName" />
          </el-form-item>
          <el-form-item label="权限等级" prop="level">
            <el-select v-model="formSearch.level" placeholder="--请选择--">
              <el-option
                v-for="item in levelOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="是否有效" prop="">
            <el-select v-model="formSearch.isvalid" placeholder="--请选择--">
              <el-option
                v-for="item in validOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
            <el-button @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <div class="rihgts-list">
      <el-row>
        <el-col>
          <!-- 角色列表 -->
          <el-table :data="rightsList" border stripe>
            <!-- 索引列 -->
            <el-table-column
              type="index"
              label="#"
              :index="indexMethod"
            ></el-table-column>
            <el-table-column prop="authName" label="权限名称"></el-table-column>
            <el-table-column prop="pid" label="父节点"></el-table-column>
            <el-table-column prop="level" label="权限等级"></el-table-column>
            <el-table-column prop="path" label="路径"></el-table-column>
            <el-table-column prop="area" label="所属模块"></el-table-column>
            <el-table-column prop="order" label="顺序号"></el-table-column>
            <el-table-column prop="icon" label="图标"></el-table-column>
            <el-table-column prop="isvalid" label="是否有效">
              <template #default="scope">
                <el-switch
                  v-model="scope.row.isvalid"
                  disabled
                  :active-value="1"
                  :inactive-value="0"
                />
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button
                  size="small"
                  type="primary"
                  v-btnpermission="'btn-rightupdate'"
                  :icon="Edit"
                  @click="showEditDialog(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="small"
                  type="danger"
                  v-btnpermission="'btn-rightdelete'"
                  @click="rightsdelete(scope.row.id)"
                  :icon="Delete"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" :offset="8">
          <el-pagination
            background
            layout="total,prev, pager, next"
            v-model:total="formSearch.total"
            v-model:page-size="formSearch.pageSize"
            v-model:current-page="formSearch.page"
            @current-change="handleCurrentChange"
          />
        </el-col>
      </el-row>
      <el-dialog
        title="新增权限"
        v-model="addDialogVisible"
        width="50%"
        @close="addDislogClosed"
      >
        <el-form
          :model="addDialogForm"
          :rules="rightsFormRulesMixin.addFormRules"
          ref="addDialogRef"
          label-width="80px"
          inline
        >
          <el-form-item label="权限名称" prop="authName">
            <el-input v-model="addDialogForm.authName" />
          </el-form-item>
          <el-form-item label="权限等级" prop="level">
            <el-select v-model="addDialogForm.level" placeholder="--请选择--">
              <el-option
                v-for="item in levelOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="isvalid">
            <el-checkbox
              v-model="addDialogForm.isvalid"
              size="large"
              label="是否有效"
              :true-label="1"
              :false-label="0"
            />
          </el-form-item>
          <el-form-item label="父节点" prop="pid">
            <el-tree-select
              v-model="addDialogForm.pid"
              :data="rightsTree"
              :props="defaultProps"
              :render-after-expand="false"
              node-key="id"
              check-strictly
            />
          </el-form-item>
          <el-form-item label="路径" prop="path">
            <el-input v-model="addDialogForm.path" />
          </el-form-item>
          <el-form-item label="所属模块" prop="area">
            <el-select v-model="addDialogForm.area" placeholder="--请选择--">
              <el-option
                v-for="item in areaOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="顺序号" prop="order">
            <el-input-number v-model="addDialogForm.order" :min="0" />
          </el-form-item>
          <el-form-item label="图标" prop="icon">
            <el-input v-model="addDialogForm.icon" />
          </el-form-item>
        </el-form>
        <template v-slot:footer>
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addFormSubmit">确 定</el-button>
        </template>
      </el-dialog>
      <el-dialog
        title="编辑权限"
        v-model="editDialogVisible"
        width="50%"
        @close="editDislogClosed"
      >
        <el-form
          :model="editDialogForm"
          :rules="rightsFormRulesMixin.editFormRules"
          ref="editDialogRef"
          label-width="80px"
          inline
        >
          <el-form-item label="权限名称" prop="authName">
            <el-input v-model="editDialogForm.authName" />
          </el-form-item>
          <el-form-item label="权限等级" prop="level">
            <el-select v-model="editDialogForm.level" placeholder="--请选择--">
              <el-option
                v-for="item in levelOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="isvalid">
            <el-checkbox
              v-model="editDialogForm.isvalid"
              size="large"
              label="是否有效"
              :true-label="1"
              :false-label="0"
            />
          </el-form-item>
          <el-form-item label="父节点" prop="pid">
            <el-tree-select
              v-model="editDialogForm.pid"
              :data="rightsTree"
              :props="defaultProps"
              :render-after-expand="false"
              node-key="id"
              check-strictly
            />
          </el-form-item>
          <el-form-item label="路径" prop="path">
            <el-input v-model="editDialogForm.path" />
          </el-form-item>
          <el-form-item label="所属模块" prop="area">
            <el-select v-model="editDialogForm.area" placeholder="--请选--">
              <el-option
                v-for="item in areaOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="顺序号" prop="order">
            <el-input-number v-model="editDialogForm.order" :min="0" />
          </el-form-item>
          <el-form-item label="图标" prop="icon">
            <el-input v-model="editDialogForm.icon" />
          </el-form-item>
        </el-form>
        <template v-slot:footer>
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editFormSubmit">确 定</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onBeforeMount } from 'vue';
import {
  getRightsList,
  netRights,
  addRights,
  editRights,
  delRights,
} from '@/network/rights.js';
import { rightsFormRulesMixin } from '@/utils/mixin.js';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Edit, Delete } from '@element-plus/icons-vue';
//分页索引
const indexMethod = (index) => {
  return index + (formSearch.page - 1) * formSearch.pageSize + 1;
};
//搜索条件
const addDialogVisible = ref(false);
const formSearch = reactive({
  authName: '',
  level: '',
  isvalid: 1,
  total: 0,
  pageSize: 10,
  page: 1,
});
const areaOption = [
  {
    value: 0,
    label: '首页菜单',
    disabled: false,
  },
  {
    value: 1,
    label: '维护菜单',
    disabled: false,
  },
  {
    value: 2,
    label: '维护扩展权限',
    disabled: false,
  },
];
const levelOption = [
  {
    value: 0,
    label: '一级权限',
    disabled: false,
  },
  {
    value: 1,
    label: '二级权限',
    disabled: false,
  },
  {
    value: 2,
    label: '三级权限',
    disabled: false,
  },
];
const validOption = [
  {
    value: 1,
    label: '有效',
  },
  {
    value: 0,
    label: '无效',
  },
];
const onSubmit = async () => {
  initData();
};
const onReset = () => {
  formSearch.authName = '';
  formSearch.level = '';
  formSearch.page = 1;
  initData();
};
//初始化数据
let rightsList = ref(null);
const initData = async () => {
  let params = {
    authName: formSearch.authName,
    level: formSearch.level,
    isvalid: formSearch.isvalid,
    page: formSearch.page,
    pageSize: formSearch.pageSize,
  };
  await getRightsList(params)
    .then((result) => {
      rightsList.value = result.data;
      formSearch.total = result.total;
    })
    .catch((err) => {
      console.log(err);
    });
};
const rightsTree = ref(null);
const defaultProps = {
  children: 'children',
  label: 'authName',
  value: 'id',
};
const initDic = async () => {
  await netRights()
    .then((result) => {
      rightsTree.value = result;
    })
    .catch((err) => {
      console.log(err);
    });
};
onBeforeMount(async () => {
  await initDic();
  await initData();
});
const handleCurrentChange = async (val) => {
  formSearch.page = val;
  await initData();
  await initDic();
};
//新增数据
const addDislogClosed = () => {
  addDialogVisible.value = false;
  addDialogRef.value.resetFields();
  addDialogRef.value.clearValidate();
};
const addDialogForm = reactive({
  authName: '',
  level: '',
  isvalid: 0,
  pid: '',
  path: '',
  area: '',
  order: '',
  icon: '',
});
const addDialogRef = ref(null);
const addFormSubmit = async () => {
  await addDialogRef.value.validate(async (valid) => {
    if (valid) {
      await addRights(addDialogForm)
        .then(() => {
          addDialogVisible.value = false;
          initData();
          initDic();
          ElMessage.success('新增成功');
        })
        .catch((err) => {
          console.log(err);
        });
    } else {
      console.log('error submit!!');
      return false;
    }
  });
};
//编辑数据
const editDislogClosed = () => {
  editDialogRef.value.resetFields();
  editDialogRef.value.clearValidate();
};
const showEditDialog = (row) => {
  editDialogVisible.value = true;
  editDialogForm.value = JSON.parse(JSON.stringify(row));
};
const editDialogVisible = ref(false);
let editDialogForm = ref({
  authName: '',
  level: '',
  isvalid: '',
  pid: '',
  path: '',
  area: '',
  order: '',
  icon: '',
  id: 0,
});
const editDialogRef = ref(null);
const editFormSubmit = async () => {
  await editDialogRef.value.validate(async (valid) => {
    if (valid) {
      await editRights(editDialogForm.value)
        .then(() => {
          editDialogVisible.value = false;
          initData();
          initDic();
          ElMessage.success('编辑成功');
          editDialogRef.value.resetFields();
        })
        .catch((err) => {
          console.log(err);
        });
    } else {
      console.log('error submit!!');
      return false;
    }
  });
};
//删除数据
const rightsdelete = async (id) => {
  await ElMessageBox.confirm('确定删除吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      await delRights({ code: id })
        .then(() => {
          initData();
          initDic();
          ElMessage.success('删除成功');
        })
        .catch((err) => {
          console.log(err);
        });
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style lang="scss" scoped>
.rights {
  margin: 14px 15px 14px;
  .rights-header {
    .drug-head-contatiner-title2 {
      font-size: 18px;
      font-weight: bold;
      color: #333;
      margin-top: 14px;
    }
  }
  .rights-list {
    margin-top: 14px;
  }
}
</style>
